<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/jsp/comm_css_include.jsp"%>
<!doctype html>
<html>
<head>
	<style type="text/css"> 
		/*密码强度*/
		.pw-strength {clear: both;position: relative;top: 8px;width: 180px;}
		.pw-bar{background: url(../../../img/pwd-1.png) no-repeat;height: 14px;overflow: hidden;width: 179px;}
		.pw-bar-on{background:  url(../../../img/pwd-2.png) no-repeat; width:0px; height:14px;position: absolute;top: 0px;transition: width .5s ease-in;-moz-transition: width .5s ease-in;-webkit-transition: width .5s ease-in;-o-transition: width .5s ease-in;}
		.pw-weak .pw-defule{ width:0px;}
		.pw-weak .pw-bar-on {width: 60px;}
		.pw-medium .pw-bar-on {width: 120px;}
		.pw-strong .pw-bar-on {width: 179px;}
		.pw-txt {padding-top: 2px;width: 180px;overflow: hidden;}
		.pw-txt span {color: #707070;float: left;font-size: 12px;text-align: center;width: 58px;}
	</style>
</head>
<body >
	 <div class="ibox-content">
		<form class="commentForm" id="commentForm">
			<table cellpadding="0" cellspacing="0" border="0" bordercolor="#3B95C8"  width="100%" class="tablefont">
				<tr>
				    <td width="23%" align="right">
				    	<label class="col-sm-3 control-label rp">原始密码：</label>
				    </td>
					<td width="75%">
						<div class="form-group">
		    				<input id="pass" name="pass"  type="password" class="form-control" aria-required="true" required="required"   minlength="5" maxlength="64" placeholder="原始密码" />
	    				</div>
					</td>
				</tr>
				
				<tr>
				    <td width="23%" align="right">
				    	<label class="col-sm-3 control-label rp">新&nbsp;&nbsp;密&nbsp;&nbsp;码：</label>
				    </td>
					<td width="75%">
						<div class="form-group">
		    				<input id="passNew" name="passNew"  autocomplete="off"  type="password" class="form-control" aria-required="true" required="required"   minlength="6" maxlength="64" placeholder="新 密 码" />
	    				</div>
					</td>
				</tr>
				
				
				<tr>
				    <td width="23%" align="right">
						<label class="col-sm-3 control-label">密码强度：</label>
					</td>
					<td id="level" class="pw-strength" width="75%">
						<div class="form-group">
								<div class="pw-bar"></div>
								<div class="pw-bar-on"></div>
								<div class="pw-txt">
									<span>弱</span>
									<span>中</span>
									<span>强</span>
								</div>
						</div>	
					</td>	
				</tr>
				
				<tr>
				     <td width="23%" align="right">
				    	<label class="col-sm-3 control-label">确认密码：</label>
				    </td>
					<td width="75%">
						<div class="form-group">
		    					<input id="passNew1" name="passNew1"  type="password" class="form-control" aria-required="true" required="required"   minlength="6" maxlength="64" placeholder="重复密码" />
	    				</div>
					</td>
				</tr>
			</table>
			<table cellpadding="0" cellspacing="0" border="0" bordercolor="#3B95C8"  width="100%">
				<tr>
					<td width="100%" align="center">
						 <div class="ibox-content">
				              <button type="button" class="btn dpbtn_green" onclick="pwersave();">确定</button>
				              <button type="reset" class="btn dpbtn_red" onclick="Reset()">重置</button>
				          </div>
					</td>
				</tr>
			</table>
		</form>
	</div>
	
	
	<!-- public quote -->
    <%@include file="/jsp/comm_js_include.jsp"%>
    <script type="text/javascript" src="${basePath}/js/jquery.md5.js" charset="utf-8"></script>
    
    <!--
    	时间：2017-04-06
    	描述：js
    -->
    <script type="text/javascript">  
  		
    $(function(){ 
	    	$('#passNew').keyup(function () { 
	    		var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); 
	    		var mediumRegex = new RegExp("^(?=.{6,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); 
	    		var enoughRegex = new RegExp("(?=.{6,}).*", "g"); 
	    	
	    		if (false == enoughRegex.test($(this).val())) { 
	    			$('#level').removeClass('pw-weak'); 
	    			$('#level').removeClass('pw-medium'); 
	    			$('#level').removeClass('pw-strong'); 
	    			$('#level').addClass(' pw-defule'); 
	    			 //密码小于6位的时候，密码强度图片都为灰色 
	    		} 
	    		else if (strongRegex.test($(this).val())) { 
	    			$('#level').removeClass('pw-weak'); 
	    			$('#level').removeClass('pw-medium'); 
	    			$('#level').removeClass('pw-strong'); 
	    			$('#level').addClass(' pw-strong'); 
	    			 //密码为八位及以上并且字母数字特殊字符三项都包括,强度最强 
	    		} 
	    		else if (mediumRegex.test($(this).val())) { 
	    			$('#level').removeClass('pw-weak'); 
	    			$('#level').removeClass('pw-medium'); 
	    			$('#level').removeClass('pw-strong'); 
	    			$('#level').addClass(' pw-medium'); 
	    			 //密码为6位及以上并且字母、数字、特殊字符三项中有两项，强度是中等 
	    		} 
	    		else { 
	    			$('#level').removeClass('pw-weak'); 
	    			$('#level').removeClass('pw-medium'); 
	    			$('#level').removeClass('pw-strong'); 
	    			$('#level').addClass('pw-weak'); 
	    			 //如果密码为6位及以下，就算字母、数字、特殊字符三项都包括，强度也是弱的 
	    		} 
	    		return true; 
	    	}); 
	    	
	    	 $("#commentForm").validate({
		    		rules: {
	    			    passNew1: {
	                    	equalTo: "#passNew"
	                    }
		    		},
		    		messages: {
		    			passNew1: {
	                        equalTo: "两次密码不一致！"
	                    }
		    		},  
			        showErrors: function (errorMap, errorList) {
			            $.each(errorList, function (i, v) {
			                layer.tips(v.message, v.element, { time: 1500 });
			                return false;
			            });  
			        },
			        /* 失去焦点时验证 */
			        onfocusout: function(element) { $(element).valid(); },
			        /*  键盘抬起不验证 */
			        onkeyup:false,
			 });
	    }) 
    
	    var pwersave = function()
		{
			var validstatus = $("#commentForm").valid();
			
			if(validstatus)
	    	{
	    		var data = $('#commentForm').serialize();
	    		var pass = $('#pass').val();
	    		var passNew = $('#passNew').val();
	    		var passNew1 = $('#passNew1').val();
				
	    		//询问框
	     		layer.confirm('确认执行本次操作？操作人：<span style="color:#BD1723;">${current_user_key.uname}</span>', {
	     		  btn: ['确定','取消'] //按钮
	     		}, function(){
	     			layer.closeAll();
	     			$.dpAjax({
	    	 			url:'${basePath}/SystemController/passNew',
	    	 			data:{
	    	 				"pass":$.md5(pass),
	    	 				"passNew":$.md5(passNew),
	    	 				"passNew1":$.md5(passNew1)
	    	 			},
	    	 			success: function(datas)
	    	 			{
	    	 				if(datas.flag == 100100)
	    	 				{
	    	 					$('#pass').val("");
	    	 					$('#passNew').val("");
	    	 					$('#passNew1').val("");
	    	 					layer.msg("修改密码成功", {icon: 6});
	    	 					window.location.href='${basePath}/user/logout';
	    	 					return;
	    	 				}
	    	 				layer.msg(datas.message, {icon: 6});
	    	 		    }
	    	 		});
	     			
	     		}, function(){
	     			layer.msg('已取消本次操作！', {icon: 6});
	     		});
	    	}
		}
  </script>
</body>
</html>
